<template>
    <div style="text-align: initial;">
      <el-row :gutter="10">
        <el-col :xl="6" :lg="6" :sm="24" v-for="(item,i) in visibleNotes" :key="i">
          <el-card shadow="hover"  class="box-card" >
            <div slot="header" class="clearfix">
              <span class="note-title">{{item.name}}</span>
              <el-tooltip transition="0s"  class="item" effect="dark" content="编辑笔记内容" placement="top-start">
                <el-button class="note-operation" type="text" @click="editNote(item.id)"><i class="el-icon-edit"></i></el-button>
              </el-tooltip>
              <el-tooltip transition="0s" class="item" effect="dark" content="编辑笔记标题与简介" placement="top-start">
                <el-button class="note-operation" type="text" @click="editInfo(item)"><i class="el-icon-edit-outline"></i></el-button>
              </el-tooltip>
              <el-tooltip transition="0s" class="item" effect="dark" content="删除此笔记" placement="top-start">
                <el-button class="note-operation" type="text" @click="deleteNote(item.id)"><i class="el-icon-delete"></i></el-button>
              </el-tooltip>
            </div>
            <div class="text item note-abs" @click="readNote(item.id)">
              {{restrict(item.abs)}}
            </div>
          </el-card>
        </el-col>

      </el-row>

      <el-row style="position: fixed;bottom: 10px;right: 10px">
        <el-button type="success" circle @click="editCategory">
          <i class="el-icon-edit"></i>
        </el-button>
      </el-row>

      <el-row style="position: fixed;bottom: 70px;right: 10px">
        <el-button type="primary" circle @click="addNote">
          <i class="el-icon-document-add"></i>
        </el-button>
      </el-row>

      <el-row class="page">
        <el-pagination
          layout="prev, pager, next"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="notes.length"
          @current-change="handelPageChange">
        </el-pagination>
      </el-row>

    </div>
</template>

<script>
    export default {
      name: "Notes",
      data() {
        return {
          notes:[],
          visibleNotes:[],
          currentPage:1,
          pageSize:12,
        }
      },
      methods: {
        showNotes(notes){
          this.notes = notes
          //0-11
          //12-24
          this.visibleNotes = []
          for(var i=this.pageSize*(this.currentPage-1);i<(this.pageSize)*(this.currentPage);i++){
            if(i>=this.notes.length){
              break
            }
            this.visibleNotes.push(this.notes[i])
          }
          console.log(this.visibleNotes)
        },

        restrict(abs){
          if(abs === "" || abs == null){
            return ""
          }

          if(abs.length<48){
            return abs
          }
          else {
            return abs.substring(0,48) + '...'
          }
        },

        editInfo(note){
          this.$emit('editInfo',note)
        },

        editNote(id){
          this.$router.push({
            path:'/note/edit',
            name:'NoteEdit',
            query:{
              noteId:id
            }
          })
        },

        readNote(id){
          this.$router.push({
            path:'/note/detail',
            name:'NoteDetail',
            query:{
              noteId:id
            }
          })
        },

        addNote(){
          this.$emit('addNote')
        },

        deleteNote(id){
          var _this = this
          this.$confirm('此操作将永久删除该笔记, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            _this.axios.get('note/delete/'+id.toString())
              .then(function (response) {
                if(response.data.status === 200){
                  _this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  _this.$emit('updateInfo')
                }
              })
              .catch(function (error) {
                console.log(error)
              })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });

        },

        editCategory(){
          this.$emit('editCategory')
        },

        handelPageChange(pageBack){
          this.currentPage = pageBack
          this.visibleNotes = []
          for(var i=this.pageSize*(this.currentPage-1);i<(this.pageSize)*(this.currentPage);i++){
            if(i>=this.notes.length){
              break
            }
            this.visibleNotes.push(this.notes[i])
          }
          console.log(this.visibleNotes)
        },


      }
    }
</script>

<style>

  .box-card{
    display: inline-block;
    width: 95%;
    margin-left: 5px;
    margin-right: 5px;
  }
  .note-title{
    font-weight: bolder;
  }
  .note-abs{
    font-size: 12px;
    height: 50px;
    cursor: pointer;
  }
  .note-operation{
    float: right;
    padding: 3px 0;
    margin-right: 2px;
    margin-left: 2px!important;
  }

  .el-card__header {
    padding: 9px 20px!important;
    height: 40px!important;
  }
  .page{
    text-align: center;
    position:fixed;
    margin:auto;
    left:0;
    right:0;
    bottom:0;
    width:200px;
    height:50px;
  }


</style>
